<template>
    <el-card>
        <el-container>
            <el-header>
                <el-form :model="filterParmas" :inline="true" label-width="100" label-suffix=":">
                    <el-form-item label="创建时间">
                        <el-date-picker v-model="filterParmas.dateRange" type="daterange" range-separator="To"
                            value-format="yyyy-MM-dd" start-placeholder="Start date" end-placeholder="End date"
                            style="width: 260px;" />
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table :data="tableData" border :tooltip-options="{ popperClass: 'kk-tooltip__popper' }">
                    <el-table-column type="expand" width="45">
                        <template #default="{row}">
                            <div style="padding: 0px 45px;">
                                <span>{{row.exceptionList.join('\n')}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" prop="createTime" width="130"></el-table-column>
                    <el-table-column label="类名" prop="className" width="250" show-overflow-tooltip></el-table-column>
                    <el-table-column label="方法名" prop="methodName" width="150" show-overflow-tooltip></el-table-column>
                    <el-table-column label="错误消息" prop="formatMessage" show-overflow-tooltip></el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'

import http from '@/api/http'

const filterParmas = ref({
    dateRange: [],
    page: 1,
    pageSize: 10
})

const tableData = ref([])

onMounted(() => {
    filterParmas.value.dateRange = [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()]
    query()
})

const query = () => {
    let params = {
        startTime: filterParmas.value.dateRange[0],
        endTime: filterParmas.value.dateRange[1],
    }
    http.get('/logging/getLoggingList', { params }).then(res => {
        tableData.value = res.data
    })
}

</script>

<style scoped>
.kk-tooltip__popper {
    width: 500px;
}
</style>